<template>
  <div class="container">
    <el-table class="elTable" :data="tData" stripe :show-header="headerShow" :row-class-name="tableRowClassName"
      style="width: 100%;--el-table-border-color:none;">
      <el-table-column v-for="(item, index) in tableConfig" :key="index" :prop="item.prop" :label="item.label"
        :min-width="item.width"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  // name:'ElTable',
  props: {
    tableConfig: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    headerShow: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      tData: [],
      isScroll: true,
      tRow: true,
      intervalTime: 1500,
      remainder: 0,
      tScroll:null,
      i: 0,
      initLength:0
    }
  },
  mounted() {
    // let i = 0;
    this.addInterval(this.i);
    this.$el.addEventListener("click",(e)=>{
      console.log("点击了：",e.target);
    });
    this.$el.addEventListener('mouseover', () => {
      this.isScroll = false;
      clearInterval(this.tScroll);
    });
    this.$el.addEventListener('mouseout', () => {
      this.isScroll = true;
      this.addInterval(this.i);
    });
  },
  methods: {
    addInterval(i){
      this.tScroll = setInterval(() => {
        this.scrollTable(i);
        if (i==this.initLength) {
          this.shiftTable();
          i=0;
        }
        i++;
        this.i = i;
        console.log(".el-table__body",document.querySelector(".el-table__body").children[0]);
        // document.querySelector(".el-table__body").children[0].style.transform = `translateY(-22*parseFloat(this.$store.state.htmlScale))`;
        document.querySelector(".el-table__body").children[0].style.top = -22*parseFloat(this.$store.state.htmlScale);
      }, this.intervalTime);
    },
    scrollTable(i) {
      // let tmp = this.tData.shift();
      let tmp = this.tData[i];
      // console.log(i);
      this.tData.push(tmp);
    },
    shiftTable(){
      for (let j = 0; j < this.initLength; j++) {
        this.tData.shift();
      }
    }
  },
  computed: {
    tableHeight(){
      if(this.headerShow==true){
        return (35 + 25 * this.tableData.length) * parseFloat(this.$store.state.htmlScale);
      }else{
        return 25 * this.tableData.length * parseFloat(this.$store.state.htmlScale);
      }
      
    },
    tableRowClassName: ({rowIndex}) => {
      if (rowIndex % 2 === 0) {
        return ""
      } else {
        return "warning-row"
      }
    },
  },
  watch: {
    tableData: {
      deep: true,
      immediate: true,
      handler() {
        this.initLength = this.tableData.length;
        this.$nextTick(() => {
          console.log('this.initLength',this.initLength);
          // this.tData = this.tableData;
          this.tableData.forEach(element => {
            this.tData.push(element)
          });
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  // height: 100%;
  // overflow: hidden;
  border: 0px solid red;
  .el-table {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-color: transparent;
    .el-table__body-wrapper{
      overflow: hidden;
    }
    // pointer-events: none;
    // 改变el-table表头背景色
    :deep(.el-table__cell) {
      background-color: transparent;
    }
    // 将el-table的单元格改为content-box，以避免在7680*3240时显示不全
    :deep(.cell) {
      height: 2.2rem;
      line-height: 2.2rem;
      box-sizing: content-box;
    }

    :deep(tr) {
      color: @titleColor;
      background-color: transparent !important;
      font-family: siyuanFont;
      font-size: 1rem;
      // pointer-events: none;

      th {
        text-align: center;
        // pointer-events: none;
      }

      td {
        text-align: center;
        padding: 0.1rem !important;
        // pointer-events: none;
      }
    }
  }
}
 
:deep(.warning-row){
  background-color: @stripedBGColor !important;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td){
  background-color: transparent !important;
}
:deep(.el-table__row--striped td) {
  background-color: @stripedBGColor !important;
}
:deep(.el-table--enable-row-hover .el-table__body .el-table__row--striped:hover > td){
  background-color: @stripedBGColor !important;
}
</style>
